/* fonts */
@import '@fontsource-variable/manrope';
@import '@fontsource-variable/jetbrains-mono';

/* presentation */
@import '$lib/styles/theme.css';

/* tailwind */
@import 'tailwindcss/theme';
@import 'tailwindcss/utilities';

/* reset */
*,
*::before,
*::after {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}

/* defaults */
:root {
	--r-background-color: oklch(20% 0.01 272);
	--r-main-font: 'Manrope Variable';
	--r-main-font-size: 42px;
	--r-main-color: oklch(98% 0.02 272);
	--r-heading-font: 'Manrope';
	--r-code-font: 'JetBrains Mono Variable';
	--r-link-color: oklch(90.54% 0.15 194);
	--ease: linear(0 0%, 0.0036 9.62%, 0.0185 16.66%, 0.0489 23.03%, 0.0962 28.86%, 0.1705 34.93%, 0.269 40.66%, 0.3867 45.89%, 0.5833 52.95%, 0.683 57.05%, 0.7829 62.14%, 0.8621 67.46%, 0.8991 70.68%, 0.9299 74.03%, 0.9545 77.52%, 0.9735 81.21%, 0.9865 85%, 0.9949 89.15%, 1 100%);
}

/* code block */
div:has(> pre) {
	padding: --spacing(4) --spacing(8);
	background-color: oklch(24% 0.02 272);
	border-top: 1px solid oklch(34% 0.02 272);
	border-radius: var(--radius-lg);
}

/* view transitions */
html {
	view-transition-name: none;
}

::view-transition-group(*) {
	animation-duration: 0.6s;
	animation-timing-function: var(--ease);
}

/* animations */
.enter {
	animation: enter 0.6s var(--ease);
}

.rotate {
	animation: rotate 0.6s var(--ease);
}

@keyframes enter {
	from {
		filter: blur(40px);
		scale: 0;
	}
}

@keyframes rotate {
	from {
		filter: blur(4px);
		scale: 2;
		rotate: -1turn;
	}
}
